<!DOCTYPE html>
<!--
Author: zouy
Unit: D9lab
Date: 2017-10-07 10:29 
-->
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>title</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
    
    <script>
        angular.module("m", [])
            .controller("c",function ($scope) {
                $scope.name = "hello world";
                $scope.entity = {
                    id: "1",
                    name: "zhangs",
                    age: "20",
                    click: function () {
                        console.log("click me");
                    }
                };
                $scope.click = function () {
                    console.log("click me");
                };
                $scope.show = function () {
                    $("#modal").modal("show");
                };
            })
            .directive("entityControlText", function () {
                return {
                    restrict: 'A',
                    replace: true,
                    scope: {
                        type: "@",
                        name: "@entityControlText",
                        title: "@",
                        entity: "=",
                        click: "&"
                    },
                    template:
                        '<div class="form-group form-horizontal">' +
                            '<label class="col-sm-2 col-sm-offset-2 control-label">' +
                                '<span ng-bind="title"></span>' +
                            '</label>' +
                            '<div class="col-sm-4">' +
                                '<input class="form-control" type="{{type}}" ng-model="entity[name]">' +
                            '</div>' +
                            '<button class="btn btn-success" ng-click="click()">点击</button>' +
                        '</div>',
                    link: function (scope) {
                        /*scope.click = function () {
                            console.log("yes");
                        };*/
                    }
                }
            })
            .directive("entityModal", function () {
                return {
                    restrict: 'A',
                    replace: true,
                    transclude: true,
                    scope: {
                        modalId: "@entityModal",
                        title: "@",
                        entity: "=",
                        action: "@",
                        canSubmit: "=",
                        submit: "="
                    },
                    templateUrl: 'modal_template.html'
                }
            });

    </script>
</head>
<body ng-app="m" ng-controller="c" style="padding-top: 50px;">
<!--<button class="btn btn-primary" ng-click="show()">show</button>-->
<!--<div entity-modal="modal">-->
    <div entity-control-text="name" title="姓名" entity="entity" click="click()"></div>
    <div entity-control-text="id" title="id" entity="entity" click="click()"></div>
    <div entity-control-text="age" title="age" entity="entity" click="click()"></div>
<!--</div>-->

</body>
</html>